<template>
  <div class="box">
    <el-select
      v-model="data.databaseName"
      placeholder="请选择源库"
      size="small"
      style="width: 240px"
      v-if="selectType == 2 || selectType == 3"
    >
      <el-option
        v-for="dict in nodeTypeOptions"
        :key="dict.value"
        :label="dict.label"
        :value="dict.value"
      />
    </el-select>
    <el-select
      v-if="selectType == 1 || selectType == 3"
      v-model="data.dataSchema"
      placeholder="请选择schema"
      size="small"
      style="width: 240px; margin-left: 15px"
    >
      <el-option
        v-for="dict in selectType == 1 ? nodeTypeOptions : schemaSelectData"
        :key="dict.value"
        :label="dict.label"
        :value="dict.value"
      />
    </el-select>
    <!-- <el-select
      v-model="data.taskMode"
      placeholder="请选择指定模式"
      size="small"
      style="width: 240px; margin-left: 15px"
    >
      <el-option
        v-for="dict in selectTaskMode"
        :key="dict.value"
        :label="dict.label"
        :value="dict.value"
      />
    </el-select> -->

    <el-button
      type="primary"
      size="small"
      style="width: 80px; margin-left: 15px"
      @click.prevent="obtainTable"
      >查询</el-button
    >

    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%; margin-top: 15px"
      height="350px"
      border
      @selection-change="handleSelectionChange"
      @selectable="(row, index) => {}"
      v-loading="loading"
      append
    >
      <el-table-column v-if="taskWay == 1" type="selection" width="55">
      </el-table-column>
      <el-table-column label="库名称" width="180" prop="schema" />
      <el-table-column prop="name" label="对象名称" width="240">
      </el-table-column>
      <el-table-column
        prop="classfiy"
        :filters="this.classfiy"
        label="对象类型"
        show-overflow-tooltip
        :filter-method="filterHandler"
      >
      </el-table-column>
      <el-table-column prop="rows" label="行数" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="comment" label="描述" show-overflow-tooltip>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import Steps from "../index.vue";
import Vue from "vue";

import {
  databaseListData,
  databaseListObjects,
  databaseListDatabaseAndSchema,
} from "@/api/console/datasourceInfo.js";

export default {
  components: { Steps },
  dicts: ["appraise_taskmode"],
  props: ["data"],
  data() {
    return {
      loading: false,
      nodeTypeOptions: [],
      dialogVisible: true,
      nodeType: "",
      tableData: [],
      form: {
        taskTables: [],
      },
      taskWay: null,
      taskMode: [],
      selectMode: null,
      classfiy: [],
      selectType: 0,
      schemaSelectData: [],
      selectTaskMode: [],
    };
  },
  /**
   *  this.$props.data.taskWay  1:可选 2:全选并不可选
   */
  async created() {},
  mounted() {
    let that = this;
    this.loading = true;
    this.taskWay = this.$props.data.taskWay;
    this.getDicts("appraise_taskmode").then((res) => {
      res.data.forEach((f) => {
        this.classfiy.push({
          text: f.dictLabel,
          value: f.dictValue,
        });
      });
    });
    this.$emit("getTaskMode", this.selectTaskMode);
    this.gainBaseSelect();
  },
  methods: {
    async gainBaseSelect() {
      const { start, databaseName, databaseId, dataSchema } = this.$props.data;
      let res = await this.getDicts("datasource_database_type");
      this.selectType =
        res.data.find((f) => start === f.dictLabel)?.dictValue ||
        this.selectType;
      res = await databaseListDatabaseAndSchema({ id: databaseId });
      this.nodeTypeOptions = res.data.data.map((f) => ({
        label: f.database,
        value: f.database,
      }));
      this.schemaSelectData = res.data.data.flatMap((f) =>
        (f.schemas || []).map((v) => ({
          label: v,
          value: v,
        }))
      );
      this.updateDataFields(databaseName, dataSchema);
      this.obtainTable();
    },

    updateDataFields(databaseName, dataSchema) {
      if (!databaseName && this.selectType != 1) {
        Vue.set(
          this.$props.data,
          "databaseName",
          this.nodeTypeOptions[0].value
        );
      }
      if (!dataSchema && this.selectType != 2) {
        const schemaValue =
          this.selectType == 1
            ? this.nodeTypeOptions[0].value
            : this.schemaSelectData[0]?.value;
        Vue.set(this.$props.data, "dataSchema", schemaValue);
      }
    },
    toggleSelection(rows) {
      let that = this;
      if (rows) {
        this.$nextTick(() => {
          that.tableData.forEach((f) => {
            rows.forEach((row) => {
              if (
                row.table == f.name ||
                f.tableName == row.table ||
                row.name == f.name
              ) {
                that.$refs.multipleTable.toggleRowSelection(f, true);
              }
            });
          });
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    async obtainTable() {
      this.loading = true;
      this.tableData = [];
      let {
        databaseId,
        databaseName,
        jobType,
        dataSchema,
        taskWay,
        taskTables,
      } = this.$props.data;
      let dataObj = {
        id: databaseId,
        databaseName: databaseName || "",
        taskMode:
          jobType == "EVALUATE_MIGRATION" ? "all" : jobType.split("_")[1],
        schemaName: dataSchema || "",
      };
      if (this.selectType == 1 || this.selectType == 3) {
        dataObj.databaseName = dataSchema;
      }
      let res = await databaseListObjects(dataObj);
      this.loading = false;
      if (Object.keys(res.data.data).length === 0) return;
      Object.keys(res.data.data).forEach((f) => {
        res.data.data[f].forEach((j) => {
          const findClassify = this.classfiy.find((k) => k.value == f);
          this.tableData.push({
            schema: databaseName || dataSchema,
            classfiy: findClassify ? findClassify.text : "",
            name: j[`${f}Name`],
            ...j,
          });
        });
      });
      if (taskWay == 2) {
        Vue.set(this.$props.data, "taskTables", this.tableData);
      }
      if (taskTables) {
        this.toggleSelection(taskTables);
      }
    },
    filterHandler(value, row, column) {
      if (value == 'all') return true;
      const findClassify = this.classfiy.find((k) => k.text == row.classfiy);
      return value === findClassify.value;
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  margin-top: 40px;
}
</style>
